// 监控测点 设备详情组件，包括 模板，emitter事件等
import Component from "../Component.js";
import ServiceUtils from "../../experience/other/shanxi/ServiceUtils.js"
export default class KnodeDetail extends Component {
    constructor() {
        super();
    }

    template() {
        const knodeDetailPopup = `
            <div id="knodeDetail" class="deviceDetail" style="width: 500px;height: 200px;">
                <div class="detailheader">
                    <span class="title">监控测点信息</span>
                    <i id="knodeDetailClosePan" class="fas fa-times closeIcon"></i>
                </div>
                <div class="detailcontent">
                
                </div>   
            </div>
        `
        this.$$("#article").append(knodeDetailPopup);
    }

    async control() {
        this.ServiceUtils = new ServiceUtils()
        // 创建 overlay
        this.deviceDetailOverlay = this.drawer.addOverlay('knodeDetail','knodeDetailClosePan')
        this.deviceDetailOverlay.setOffset([10,10])
        // 相关 emit事件的初始化
        this.emitEventInit()
    }

    emitEventInit() {
        const mode = this.utils.getUrlParamer('edit')
        const meta_id = this.utils.getUrlParamer('meta_id')
        const flag = mode == 'true' ? true : false

        this.emitter.on('knode-detail-open',async () => {
            if(flag) {
                return
            }
            const detailContent = this.$$('#knodeDetail .detailcontent')
            detailContent.empty()
            const targetArgument = this.emitter.params[0]
            const device_id = targetArgument.get('device_id')
            const coordinate = targetArgument.getGeometry().getCoordinates()
            this.deviceDetailOverlay.setPosition(coordinate)
            const {data: knodes} = await this.api.current_knode_data(meta_id)
            const enableNode = knodes.find((node) => {
                return node.NodeID == device_id
            })
            const updateDateArr = enableNode.UpdateTime.split('T')
            const detailInfoContent = `
                <div class="infoitem">
                     <div class="detailname">测点编号</div>
                     <div class="detailval">${enableNode.NodeID}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">测点位置</div>
                     <div class="detailval">${enableNode.NodePlace}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">测点类型</div>
                     <div class="detailval">${enableNode.SensorName}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">当前值</div>
                     <div class="detailval">${enableNode.CurrentData + enableNode.SensorUnit}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">更新时间</div>
                     <div class="detailval">${updateDateArr[0] + ' ' + updateDateArr[1]}</div>              
                </div>
            `
            detailContent.append(detailInfoContent)

        })
    }


}
